Cuando el usuario escribe + en mi input , me gustaría que el + sea verde
Ej: +10000 --> "+" debe ser verde y 10000 debe ser negro
Cuando el usuario escribe - en mi input , me gustaría que - sea rojo
Ej: -10000 --> "-" debe ser rojo y 10000 debe ser negro
Mi idea era usar ::first-letter , pero me doy cuenta de que no funciona en input
¿Es esto posible con css y javascript? ¿Necesito algún Regex elegante para lograr esto?
input { font-size: 100px; } /* only - should be red */ input::first-letter { color: red; } /* only + should be green */ input::first-letter { color: green; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="styles.css" /> <title>Static Template</title> </head> <body> <input type="text" /> </body> </html>Primero obtenga el elemento <input> con .getElementsByTagName('input')[0] , luego puede adjuntar un detector de eventos en keyup . Desde aquí, puede usar .style.color para actualizar el color según .value[0] :
const target = document.getElementsByTagName('input')[0]; target.addEventListener('keyup', function() { if (this.value[0] === '-') { this.style.color = 'red'; } else if (this.value[0] === '+') { this.style.color = 'green'; } else { this.style.color = 'black'; } }) input { font-size: 100px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="styles.css" /> <title>Static Template</title> </head> <body> <input type="text" /> </body> </html> Tenga en cuenta que el fragmento anterior solo verifica el primer carácter ingresado. Si desea verificar si hay alguna aparición del carácter de destino, puede recorrer el .value .